<template>
	<view style="padding: 10px;">
		<u-navbar title="反馈详情" :autoBack="true" placeholder>
		</u-navbar>
		<view class="text-sm bg-white" style="padding: 10px; margin-bottom: 10px;">
			<view class="Grid" style="margin-bottom: 5px;">
				<view style="width: 80px;">反馈类型：</view>
				<view class="Grid-cell">
					<view class="Grid">
						<view>{{getType()}}</view>
						<view class="Grid-cell" style="text-align: right;">{{info.status_name}}</view>
					</view>
				</view>
			</view>
			<view class="Grid" style="margin-bottom: 5px;">
				<view style="width: 80px;">反馈时间：</view>
				<view class="Grid-cell">{{info.create_time}}</view>
			</view>
			<view v-if="info.phone" class="Grid" style="margin-bottom: 5px;">
				<view style="width: 80px;">联系方式：</view>
				<view class="Grid-cell">{{info.phone}}</view>
			</view>
			<view class="Grid" style="margin-bottom: 5px;">
				<view style="width: 80px;">反馈内容：</view>
				<view class="Grid-cell">{{info.content}}</view>
			</view>
			<view v-if="info.images.length" class="Grid" style="margin-bottom: 5px;">
				<view style="width: 80px;"></view>
				<view class="Grid-cell">
					<view v-for="(item, index) in info.images" :key="index"
						style="position: relative; width: 80px; height: 80px; display: inline-block; background-color: #f4f5f7; border-radius: 2px; margin: 0 8px 8px 0;">
						<u--image :showLoading="true" :src="item.file_url" width="80px" height="80px" mode="aspectFit"
							@click="previewImage(index)"></u--image>
					</view>
				</view>
			</view>
		</view>
		<view v-if="info.status" class="text-sm bg-white" style="padding: 0 10px; margin-bottom: 10px;">
			<view class="Grid" style="padding: 10px 0;">
				<view style="width: 80px;">回复内容：</view>
				<view class="Grid-cell">
					<u-parse :content="info.reply"></u-parse>
				</view>
			</view>
		</view>
		<view v-if="info.status" class="Grid Grid--justifySpaceBetween Grid--center" style="padding: 10px 0 50px;">
			<u-button :plain="!info.result" :type="info.result == 1 ? 'success' : 'info'" shape="circle" icon="thumb-up" text="已解决" style="width: 100px;" @click="!info.result && upresult(1)"></u-button>
			<u-button :plain="!info.result" :type="info.result == 2 ? 'success' : 'info'" shape="circle" icon="thumb-down" text="未解决" style="width: 100px;"  @click="!info.result && upresult(2)"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import navConfig from './config/navConfig.js'
	import normalPagingConfig from './config/normalPagingConfig.js'
	import {
		feedbackInfo,
		feedbackUpresult
	} from '@/service/index.js'

	export default {
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo
			}),
		},
		data() {
			return {
				navConfig,
				normalPagingConfig,
				// form-label-style
				formLabelStyle: {
					fontSize: '12px',
					color: '#2D3338',
					paddingLeft: '12px',
				},
				info: {
					images: []
				}
			};
		},
		onLoad(options) {
			this.loadData(options)
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: `${this.userInfo.wechat_info.title}`
			})
		},
		methods: {
			async loadData(options) {
				try {
					const result = await feedbackInfo({
						feedback_id: options.id
					})
					console.log(result)
					if (result.code == 200) {
						this.info = result.data
					}
				} catch (e) {}
			},
			// 预览方案简介图片
			previewImage(index) {
				let urls = []
				this.info.images.forEach(item => {
					urls.push(item.file_url)
				})
				uni.previewImage({
					current: index,
					urls
				});
			},
			getType() {
				return this.info.type == 1 ? '投诉' : '其他'
			},
			async upresult(status) {
				try {
					const result = await feedbackUpresult({
						feedback_id: this.info.feedback_id,
						result: status
					})
					if (result.code == 200) {
						this.loadData({id: this.info.feedback_id})
					}
				} catch (e) {}
			}
		}
	}
</script>

<style lang="scss">
	.custom-form {
		background: #FFFFFF;
		border-radius: 8px;
		padding: 0 12px 50px;
	}
</style>